<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/static/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="/static/echarts.min.js"></script>
    <script type="text/javascript" src="/static/china.js"></script>
{#    <link rel="stylesheet" type="text/css" href="/static/css/app.css" />#}
    <style type="text/css">
        *{

            top:0px;
            left: 0px;
            margin: 0px;
            border: 0px;
            padding: 0px;
            overflow-x:hidden;
            overflow-y:hidden


        }
        #div-1{
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url("../../static/img/bg01.png");


        }
        html, body {
	width:100%;
	height:100%;
	font-family:"microsoft yahei", arial, sans-serif;
	background-color:#0b0f34;

	overflow-x:hidden;
	overflow-y:hidden;

}
body {margin:0 auto;min-width:375px;max-width:1920px;}
        #div-2{
            background-image: url("../../static/tpl04/img/wrapper-bg.png");
            position: absolute;
            background-size:100% 100%;
	        box-sizing:border-box;

        }
        #header-1{
            /*{#margin-left: -100px;#}*/
            /*{#top:1%;#}*/
            /*{#color: crimson;#}*/
            /*{#position: relative;#}*/
            /*{#box-sizing:border-box;#}*/
        }
        #h2-1{
            /*{#font-size: 160%;#}*/
            /*{#line-height:64px;#}*/
            /*{#font-weight:400;#}*/

        }
        #button1{
            background-image: url("../../static/img/botton3.png");

        }
        #button_z{
            background-image: url("../../static/img/button_z.png");

        }
        #h2-2{
            text-align: center;
            color: dodgerblue;
            font-weight: 400;
        }
        #h2-3{
            text-align: center;
            color: dodgerblue;
            font-weight: 400;

        }
    </style>
</head>
<body>
<div id="div-1">
    <header id="header-1">
            <h2 id="h2-1"></h2>
        </header>
    <div id="div-2">
        <div id="button1">
            <h2 id="h2-2"></h2>
        </div>
        <div id="button_z">
            <h2 id="h2-3"></h2>
        </div>
    </div>
</div>
<script type="text/javascript">
        const width = document.documentElement.clientWidth;
        const height = document.documentElement.clientHeight;
        const header1=document.getElementById("header-1");
        const h2_1=document.getElementById("h2-1");
        const butto1=document.getElementById("button1");
        const button_z=document.getElementById("button_z")
        var screen_width = width;
        const div1=document.getElementById("div-2");
        if (width < height) {
            div1.style.width="97%";
            div1.style.height="90%";
            div1.style.top="6%";
            div1.style.left="20px";
            div1.style.right="20px";


            screen_width = height;
            const contentDOM = document.getElementById("div-1");
            contentDOM.style.width = height + 'px';
            contentDOM.style.height = width + 'px';
            contentDOM.style.top = (height - width) / 2 -10+ 'px';
            contentDOM.style.left = 0 - (height - width) / 2+ 'px';
            contentDOM.style.transform = 'rotate(90deg)';
            header1.style.marginLeft= "42.7%";
            header1.style.top="4%";
            header1.style.color="crimson";
            header1.style.position="relative";
            header1.style.boxSizing="border-box";
            h2_1.style.fontSize="160%";
            h2_1.style.lineHeight="64px";
            h2_1.style.fontWeight="400";
            butto1.style.width="10%";
            butto1.style.height="3.8%";
            butto1.style.marginLeft="21.5%";
            button_z.style.width="10%";
            button_z.style.height="3.8%";
            button_z.style.marginLeft="67.9%";
            button_z.style.position="absolute";
            const evt = "onorientationchange" in window ? "orientationchange" : "resize";
            window.addEventListener(evt, function () {
        if (window.orientation === 90 || window.orientation === -90) {

        screen_width = height;
        contentDOM.style.width = height + 'px';
        contentDOM.style.height = width*0.8 + 'px';
        contentDOM.style.top = '0px';
        contentDOM.style.left = '0px';
        contentDOM.style.transform = 'none';
        }else{

            div1.style.width="97%";
            div1.style.height="93%";
            div1.style.top="36px";
            div1.style.left="10px";
            div1.style.bottom="15px";
            div1.style.right="15px";
            header1.style.marginLeft= "42.7%";
            header1.style.top="4%";
            header1.style.color="crimson";
            header1.style.position="relative";
            header1.style.boxSizing="border-box";
            h2_1.style.fontSize="160%";
            h2_1.style.lineHeight="64px";
            h2_1.style.fontWeight="400";
            butto1.style.width="10%";
            butto1.style.height="3.8%";
            butto1.style.marginLeft="21.5%";
            button_z.style.width="10%";
            button_z.style.height="3.8%";
            button_z.style.marginLeft="67.9%";
            button_z.style.position="absolute";
        screen_width = height;
        contentDOM.style.width = height + 'px';
        contentDOM.style.height = width*0.8 + 'px';
        contentDOM.style.top = (height - width) / 2 + 'px';
        contentDOM.style.left = 0 - (height - width) / 2 + 'px';
        contentDOM.style.transform = 'rotate(90deg)';}
        }, false);

        }else {
            div1.style.width="99%";
            div1.style.height="94.5%";
            div1.style.top="34px";
            div1.style.left="10px";
            div1.style.bottom="15px";
            div1.style.right="20px";
            header1.style.marginLeft= "43.5%";
            header1.style.top="1%";
            header1.style.color="crimson";
            header1.style.position="relative";
            header1.style.boxSizing="border-box";
            h2_1.style.fontSize="160%";
            h2_1.style.lineHeight="64px";
            h2_1.style.fontWeight="400";
            butto1.style.width="10%";
            butto1.style.height="3.8%";
            butto1.style.marginLeft="21.5%";
            button_z.style.width="10%";
            button_z.style.height="3.8%";
            button_z.style.marginLeft="67.9%";
            button_z.style.position="absolute";
        }

    //jquery-css:<header><h2></h2></header>
    $(document).ready(function () {
        if(width< height){
        //else{
            $("#h2-1").text("全国疫情实时分析").css("color","#5ac8fa");
            $("#h2-2").text("全球疫情实时分析").css("font-size","100%").css("margin-top","5px");
            $("#h2-3").text("重点城市疫情实时分析").css("font-size","80%").css("margin-top","5px") ;
             $("#div-2").append("<div id='map'></div>");
            $("#map").css("width","41%").css("height","55%").css("position","absolute").css("margin-top","3%").css("background-size","100% 100%").css("background-image","url('../../static/tpl04/img/panel-c-b.png')");
            $("#map").css("margin-left","29.2%").append("<div id='map_a'></div>");
            $("#map_a").css("width","100%").css("height","100%");
            //add-div[@id='pie']
            $("#div-2").append("<div id='pie'></div>");
            $("#pie").css("position","absolute").css("width","27%").css("height","27%").css("margin-top","3%");
            $("#pie").css("margin-left","2%").css("background-image","url('../../static/tpl04/img/panel-r-m.png')").css("background-size","100% 100%").append("<div id='pie-1'></div>");
            $("#pie-1").css("width","100%").css("height","15%").css("background-image","url('../../static/tpl04/img/title-bg.png')").css("background-size","100% 100%");
            var pie2_height=$("#pie").height()-$("#pie-1").height();
            $("#pie").append("<div id='pie-2'><div>");
            $("#pie-2").css("width","100%").css("height",pie2_height.toString()+"px");
            //add-div[@id='polt-1']
            $("#div-2").append("<dic id='plot-1'>");
            $("#plot-1").css("width","41.2%").css("height","39%").css("background-image","url('../../static/tpl04/img/panel-c-b.png')").css("position","absolute").css("background-size","100% 100%");
            $("#plot-1").css("margin-left","29.1%").css("top","60%").append("<div id='plot-1-t'></div>").append("<div id='plot-1-tt'></div>");
            $("#plot-1-t").css("width","100%").css("height",'12%').css("background-image","url('../../static/tpl04/img/title-bg-long.png')").css("background-size","100% 100%");
            var plot_1_tt_height=$("#plot-1").height()-$("#plot-1-t").height()-2;
            $("#plot-1-tt").css("width","99.7%").css("height",plot_1_tt_height.toString()+"px");
            //add-div[@id='plot-2]
            $("#div-2").append("<div id='plot-2'></div>");
            $("#plot-2").css("width","28.5%").css("height","32%").css("position","absolute").css("background-size","100% 100%").css("background-image","url('../../static/tpl04/img/panel-c-b.png')")
            $("#plot-2").css("left","70.5%").css("margin-top","3%").append("<div id='plot-2-t'></div>").append("<div id='plot-2-tt'></div>");
            $("#plot-2-t").css("width","100%").css("height",'17%').css("background-image","url('../../static/tpl04/img/title-bg-long.png')").css("background-size","100% 100%");
            var plot_2_tt_height=$("#plot-2").height()-$("#plot-2-t").height()-2;
            $("#plot-2-tt").css("width","99.7%").css("height",plot_2_tt_height.toString()+"px");
            //add-div[@id='felt-text']
            $("#div-2").append("<div id='left-text'></div>");
            $("#left-text").css("position","absolute").css("width","25%").css("height","65%").css("margin-left","2%").css("background-image","url('../../static/tpl04/img/panel-l-b.png')").css("background-size","100% 100%")
            $("#left-text").css("top","33.5%").append("<div id='left-text-1'></div>").append("<div id='left-text-2'></div>");
            $("#left-text-1").css("width","100%").css("height",'8%').css("background-image","url('../../static/tpl04/img/title-bg-long.png')").css("background-size","100% 100%");
            var plot_2_tt_height=$("#left-text").height()-$("#left-text-1").height()-2;
            $("#left-text-2").css("width","99.7%").css("height",plot_2_tt_height.toString()+"px");

            //add-div[@id='citem']
            $("#div-2").append("<div id='citem'></div>");
            $("#citem").css("width","28.5%").css("height","58%").css("position","absolute").css("background-size","100% 100%").css("background-image","url('../../static/tpl04/img/panel-c-b.png')")
            $("#citem").css("left","70.5%").css("top","40%");
                $("#div-2").append("<div id='time'></div>");
                $("#time").css("width","12%").css("height","4%").css("position","absolute").css("margin-top","0%").css("margin-left","87%").css("color","#5ac8fa")
                window.onload=function(){
            setInterval(function(){
            var date=new Date();
            var year=date.getFullYear(); //获取当前年份
            var mon=date.getMonth()+1; //获取当前月份
            var da=date.getDate(); //获取当前日
            var day=date.getDay(); //获取当前星期几
            var h=date.getHours(); //获取小时
            var m=date.getMinutes(); //获取分钟
            var s=date.getSeconds(); //获取秒
            var d=document.getElementById('time');
            d.innerHTML=year+'/'+mon+'/'+da+' '+h+':'+m+':'+s;  },1000)  }
            const evt = "onorientationchange" in window ? "orientationchange" : "resize";
            window.addEventListener(evt, function () {
            if (window.orientation === 90 || window.orientation === -90) {
            }else {
                 $("#div-2").append("<div id='map'></div>");

            $("#map").css("width","37.4%").css("height","67%").css("border","1px deepskyblue solid").css("position","absolute").css("margin-top","3%");
            $("#map").css("margin-left","31%","").append("<div id='map_a'></div>");
            $("#map_a").css("width","100%").css("height","100%");;
                $("#h2-1").text("全国疫情实时分析").css("font-size","90%");
                $("#h2-2").text("全球疫情实时分析").css("font-size","100%");
                $("#h2-3").text("重点城市疫情实时分析").css("font-size","80%").css("margin-top","5px") ;
            }})


    //}


        }else {
            $("#h2-1").text("全国疫情实时分析").css("font-size","160%").css("color","#5ac8fa");
            $("#h2-2").text("全球疫情实时分析").css("font-size","100%");
            $("#h2-3").text("重点城市疫情实时分析").css("font-size","80%").css("margin-top","5px") ;
            //add-dic[@id="map"]
            $("#div-2").append("<div id='map'></div>");
            $("#map").css("width","41%").css("height","60%").css("position","absolute").css("margin-top","3%").css("background-size","100% 100%").css("background-image","url('../../static/tpl04/img/panel-c-b.png')");
            $("#map").css("margin-left","29.2%").append("<div id='map_a'></div>");
            $("#map_a").css("width","100%").css("height","100%");

            //add-div[@id='pie']
            $("#div-2").append("<div id='pie'></div>");
            $("#pie").css("position","absolute").css("width","27%").css("height","29%").css("margin-top","3%");
            $("#pie").css("margin-left","2%").css("background-image","url('../../static/tpl04/img/panel-r-m.png')").css("background-size","100% 100%").append("<div id='pie-1'></div>");
            $("#pie-1").css("width","100%").css("height","13%").css("background-image","url('../../static/tpl04/img/title-bg.png')").css("background-size","100% 100%");
            var pie2_height=$("#pie").height()-$("#pie-1").height();
            $("#pie").append("<div id='pie-2'><div>");
            $("#pie-2").css("width","100%").css("height",pie2_height.toString()+"px");
            //add-div[@id='polt-1']
            $("#div-2").append("<dic id='plot-1'>");
            $("#plot-1").css("width","41.2%").css("height","32%").css("background-image","url('../../static/tpl04/img/panel-c-b.png')").css("position","absolute").css("background-size","100% 100%");
            $("#plot-1").css("margin-left","29.1%").css("top","67%").append("<div id='plot-1-t'></div>").append("<div id='plot-1-tt'></div>");
            $("#plot-1-t").css("width","100%").css("height",'15%').css("background-image","url('../../static/tpl04/img/title-bg-long.png')").css("background-size","100% 100%");
            var plot_1_tt_height=$("#plot-1").height()-$("#plot-1-t").height()+35;
            $("#plot-1-tt").css("width","100%").css("height",plot_1_tt_height.toString()+"px");
            //add-div[@id='plot-2]
            $("#div-2").append("<div id='plot-2'></div>");
            $("#plot-2").css("width","28.5%").css("height","32%").css("position","absolute").css("background-size","100% 100%").css("background-image","url('../../static/tpl04/img/panel-c-b.png')")
            $("#plot-2").css("left","70.5%").css("margin-top","3%").append("<div id='plot-2-t'></div>").append("<div id='plot-2-tt'></div>");
            $("#plot-2-t").css("width","100%").css("height",'17%').css("background-image","url('../../static/tpl04/img/title-bg-long.png')").css("background-size","100% 100%");
            var plot_2_tt_height=$("#plot-2").height()-$("#plot-2-t").height()-2;
            $("#plot-2-tt").css("width","99.7%").css("height",plot_2_tt_height.toString()+"px");
            //add-div[@id='felt-text']
            $("#div-2").append("<div id='left-text'></div>");
            $("#left-text").css("position","absolute").css("width","25%").css("height","63%").css("margin-left","2%").css("background-image","url('../../static/tpl04/img/panel-l-b.png')").css("background-size","100% 100%")
            $("#left-text").css("top","35.5%").append("<div id='left-text-1'></div>").append("<div id='left-text-2'></div>");
            $("#left-text-1").css("width","100%").css("height",'8%').css("background-image","url('../../static/tpl04/img/title-bg-long.png')").css("background-size","100% 100%");
            var plot_2_tt_height=$("#left-text").height()-$("#left-text-1").height()-2;
            $("#left-text-2").css("width","99.7%").css("height",plot_2_tt_height.toString()+"px");

            //add-div[@id='citem']
            $("#div-2").append("<div id='citem'></div>");
            $("#citem").css("width","28.5%").css("height","58%").css("position","absolute").css("background-size","100% 100%").css("background-image","url('../../static/tpl04/img/panel-c-b.png')")
            $("#citem").css("left","70.5%").css("top","40%");
            $("#div-2").append("<div id='time'></div>");
            $("#time").css("width","12%").css("height","4%").css("position","absolute").css("margin-top","0%").css("margin-left","87%").css("color","#5ac8fa") //.css("border","1px solid #5ac8fa");


        }
        //}



    });


        //}

    // option



</script>
<script type="text/javascript" src="/static/js/times.js"></script>
{#<script type="text/javascript" src="/static/js/table.js"></script>#}
<script type="text/javascript" src="/static/js/map_a.js"></script>
<script type="text/javascript" src="/static/js/left-text-2.js"></script>
<script type="text/javascript" src="/static/js/redars.js"></script>
<script type="text/javascript" src="/static/js/bar_line.js"></script>


</body>
</html>